<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>
<title>Epsilon Mobile Framework - Version 2.0</title>
<link href="css/style.css"     		 rel="stylesheet" type="text/css">
<link href="css/framework.css" 		 rel="stylesheet" type="text/css">
<link href="css/menu.css" 		 	 rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="css/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="css/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="css/animate.css"			 rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/framework.plugins.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			正在加载中...
            <em>尊敬的大人:小人正在努力奔跑中 还请稍等</em>
        </p>
    </div>
</div>
<div class="all-elements">
<div id="perspective" class="perspective effect-airbnb"><!--this houses the entire page, and creates the effect-->
    <div class="header">
        <a href="#" id="showMenu"><i class="fa fa-navicon"></i></a>
        <a href="#" id="pageLogo"><img src="images/z.png" alt="img"></a>
        <a href="#" id="openMail"><i class="fa fa-envelope-o"></i></a>
    </div> 	
    <div class="outer-nav">
        <div class="inner-nav">
            <div class="nav-item">
                <a href="index.html">
                    <i class="nav-icon fa fa-home"></i>
                    Home
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-cog"></i>
                    Features
                </a>
                <div class="nav-sub-item">
                    <a href="features-type.html">Type</a>
                    <a href="features-jquery.html">jQuery</a>
                    <a href="features-others.html">Others</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-camera"></i>
                    Gallery
                </a>
                <div class="nav-sub-item">
                    <a href="gallery-wide.html">Thumbs Wide</a>
                    <a href="gallery-round.html">Thumbs Round</a>
                    <a href="gallery-square.html">Thumbs Square</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-picture-o"></i>
                    Portfolio
                </a>
                <div class="nav-sub-item">
                    <a href="portfolio-adaptive.html">Adaptive</a>
                    <a href="portfolio-one.html">One Column</a>
                    <a href="portfolio-two.html">Two Columns</a>
                    <a href="portfolio-wide.html">Wide Columns</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item active-item">
                    <i class="nav-icon fa fa-files-o"></i>
                    Pages
                </a>
                <div class="nav-sub-item nav-sub-active">
                    <a href="page-soon.html">Soon Page</a>
                    <a href="page-error.html">Error Page</a>
                    <a class="active-item" href="page-profile.html">Profile Page</a>
                    <a href="page-timeline.html">Timeline Page</a>
                    <a href="page-updates.html">Updates Page</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="contact.html">
                    <i class="nav-icon fa fa-envelope"></i>
                    Contact
                </a>
            </div>
            <div class="nav-item">
                <a id="closeMenu" href="#">
                    <i class="nav-icon fa fa-times"></i>
                    Close
                </a>
            </div>
        </div>
    </div>
    <div class="header-clear"></div>
    <div class="perspective_container"><!--the "moving to the left" content box-->
        <div class="wrapper"><!-- wrapper needed for scroll -->
        <div class="profile-header full-bottom">
            <div class="profile-header-contents">
                <img class="profile-header-logo" src="images/3s.jpg" alt="img">
                <h4 class="profile-header-heading">John Doe</h4>
                <em class="profile-header-subheading">Professional Consultant</em>
                <div class="profile-header-socials">
                    <a href="#">
                        <i class="fa fa-facebook"></i>
                        5k+ Likes
                    </a>
                    <a href="#">
                        <i class="fa fa-twitter"></i>
                        9k+ Followers   
                    </a>
                    <a href="#">
                        <i class="fa fa-google-plus"></i>
                        2.5k + Plus
                    </a>
                </div>
            </div>
            <div class="profile-header-background"></div>
            <div class="profile-header-overlay"></div>
        </div>
        
        <div class="content">
            <div class="container no-bottom">
                <div class="sidebar-left-small staff-sidebar-small">
                    <img src="images/1.jpg" class="responsive-image" alt="img">
                    <h2 class="no-bottom">John Doe</h2>
                    <p>Professional Freelancer</p>
                    <div class="decoration"></div>
                    <ul class="font-icon-list">
                        <li><a href="#"><i class="fa fa-phone"></i>+ 1 234 556 887</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i>mail@domain.com</a></li>
                        <li><a href="#"><i class="fa fa-dollar"></i>Min. Budget: $500</a></li>
                        <li><a href="#"><i class="fa fa-clock-o"></i>Available 24/7</a></li>
                        <li>
                            <a href="#">
                                <i class="fa fa-location-arrow"></i>521 King Street, <br>Melbourne Australia
                            </a>
                        </li>
                    </ul>
                    <br>
                </div>
                <div class="decoration hide-if-responsive"></div>
                <div class="sidebar-right-big">
                    <h3>About John Doe</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere 
                        convallis urna id mollis. Maecenas justo tellus, tristique vel dignissim non, 
                        pharetra vitae magna.
                    </p>
                    <h3>Skills</h3>
                    <div class="sidebar-left-small">
                        <ul>
                            <li>Front End Coding</li>
                            <li>Back End Coding</li>
                            <li>UI / UX Design </li>
                            <li>WordPress Coding</li>
                            <li>HTML 5 Coding</li>
                            <li>CSS 3 Coding</li>
                        </ul>
                    </div>
                    <div class="sidebar-right-big">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere 
                            convallis urna id mollis. Maecenas justo tellus, tristique vel dignissim non, 
                            pharetra vitae magna. Maecenas justo tellus, tristique vel dignissim non, 
                            pharetra vitae magna.
                        </p>
                    </div>
                    <div class="clear"></div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere 
                        convallis urna id mollis. Maecenas justo tellus, tristique vel dignissim non, 
                        pharetra vitae magna. Nunc mattis pretium dictum. In aliquam lacus est, eu 
                        vestibulum arcu ultrices sed.Nunc mattis pretium dictum. In aliquam lacus est, eu 
                        vestibulum arcu ultrices sed. 
                    </p>
                </div>
            </div>
            
            <div class="decoration"></div>
            
            <div class="footer-section">
                <p class="footer-text">
                    Copyright 2014.<br>
                    All rights reserved.
                </p>
                <div class="footer-icons">
                    <a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
                    <a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
                </div>
            </div>
            
        </div>         
      
        </div><!-- wrapper -->
    </div><!-- /perspective container -->
</div><!-- /perspective -->
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
